<!--  -->
<template>
  <div class="answer-notes">
    <div class="chose-course-top">
      <div class="header-left">
        <span
          class="back-arrow"
          @click="() => this.$router.push('/reverse/grammar-sentence')"
        ></span>
      </div>
      <div class="course-title">
        答题分析
      </div>
      <!-- <div class="blank"></div> -->
    </div>
    <div class="answer-wrap">
      <p class="chapter-title">
        {{ reverseStatus.pack_name }} · {{ reverseStatus.name }}
      </p>
      <section class="answer-result">
        <div class="result-item">
          <span>答对题数</span>
          <span>{{ answer.right_num }}/{{ answer.total }}</span>
        </div>
        <div class="result-item">
          <span>正确率</span>
          <span>{{ answer.right_percent }}%</span>
        </div>
        <div class="result-item">
          <span>答题用时</span>
          <span>{{ answer.spent_time | HHmmssFilter }}</span>
        </div>
      </section>
      <section class="yxp-info">
        <div class="yxp-credit">
          <img src="~assets/reverse/credit.png" alt="" />
          <span>+{{ answer.credit }}学分</span>
        </div>
        <div class="yxp-diamond">
          <img src="~assets/reverse/diamond.png" alt="" />
          <span>+{{ answer.diamond }}易学币</span>
        </div>
      </section>
      <section class="answer-content">
        <div class="answer-title">
          <img src="~assets/reverse/answer-qa.png" alt="" />
          <span>查看答案</span>
        </div>
        <section class="answer-main">
          <div
            class="subjects-item"
            :class="{ 'subjects-item__error': +item.error === 0 }"
            v-for="(item, index) in answer.subjects"
            :key="item.id"
          >
            <p class="js-subjects-title">
              <span>{{ index + 1 }}.</span>
              <span
                v-for="word in item.title.split(' ')"
                :key="word + index + item.id"
              >
                <template v-if="word === '###'">
                  <span class="space-blank" :data-error="index"></span>
                </template>
                <template v-else>
                  {{ word }}
                </template>
              </span>
            </p>
            <p><span>正确答案：</span>{{ item.keys_words }}</p>
            <p><span>句子翻译：</span>{{ item.translation }}</p>
          </div>
        </section>
      </section>
    </div>
    <Timetips ref="timetips"></Timetips>
  </div>
</template>
<script>
import { lastAnswer } from "@/services/reverse";
import { SUCCESS_CODE } from "@/utils/const";
import Timetips from "@/components/Timetips";
import { mapState } from "vuex";
import $ from "jquery";
export default {
  components: {Timetips},
  data() {
    return {
      answer: {},
    };
  },
  computed: {
    ...mapState({
      reverseStatus: (state) => state.reverseStatus,
    }),
  },
  watch: {},
  methods: {},
  created() {
    lastAnswer({
      chapter_id: this.reverseStatus.chapters_id,
    }).then((res) => {
      if (res.code === SUCCESS_CODE) {
        this.answer = res.data;
      }
    });
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {
    this.$nextTick(() => {
      let titles = $(".answer-main .js-subjects-title");
      titles.each((i, v) => {
        $(v)
          .find(".space-blank")
          .each((k, text) => {
            // 筛选错误的句子
            let errorIds = this.answer.stu_selection.map((v) => v.id);
            let subjectItems = this.answer.subjects.filter((v) =>
              errorIds.includes(v.id)
            );
            let trueWords = subjectItems.map((v) => v.keys_words.split(","));
            let trueWord = trueWords[i][k];
            let val = this.answer.stu_selection[i].title.split(",")[k].trim().replace(/\s+/g, ' ');
            $(text).text(val);
            if (!val.toLowerCase().replace(/\s\s*/g, " ").includes(trueWord.toLowerCase())) {
              $(text).css({
                color: "#FF604B",
              });
            } else {
              $(text).css({
                color: "#27BFA3",
              });
            }
          });
      });
    });
  },
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
  beforeRouteLeave(to, from, next) {
    // ...
    this.$yxpConfirm({
      msg: "是否退出",
    })
      .then(() => {
        next();
      })
      .catch(() => {});
  },
};
</script>
<style lang="less" scoped>
/* @import url(); 引入公共css类 */
@import url("./index.less");
</style>
